/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-11-25 10:54:54
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import fontManage from "@/myFabric/fontManage";
import Tooltip from "antd/lib/tooltip";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import styles from "./ToolFontFamily.module.less";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";

interface Iprops {
}

// 字体工具
export default function ToolFontFamily() {

  const [visible, setVisible] = useState(false);
  const [fontFamily, setFontFamily] = useState(editorStore.fontFamily);
  const [disable, setDisable] = useState(false);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock, fontFamily } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setFontFamily(fontFamily);
      setDisable(lock || lockNameNum);
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <Tooltip
      title={
        <div className={styles.fontFamily} >
          {
            fontManage.fontlist.map((fontC, i) => {
              return (
                <div
                  key={i}
                  onClick={() => {
                    designEditor.setFontFontFamily(fontC.id);
                    setFontFamily(fontC.id);
                  }}
                  className={clsx(styles.fontFamilyItem, (fontC.id === fontFamily) && styles.active)}
                >
                  <img
                    alt=""
                    className={styles.img}
                    src={fontC.img}
                  />
                </div>
              );
            })
          }
        </div>
      }
      trigger={['click']}
      color={"#ffffff"}
      placement="bottom"
    >
      <div
        className={clsx(styles.toolFontFamily, visible && styles.visible, disable && styles.disable)}
      >
        <img
          alt=""
          className={styles.fontImg}
          src={fontManage.getFontImg(fontFamily)}
        />
      </div>
    </Tooltip>
  );

}